<template>
	<view class="container">
		<view class="noticelist">
			<view class="noticeitem">
				<image src="/static/notice1.png">
					<u-badge :count="noticecount" type="error" :offset="[15,noticecount>=100?565:noticecount>=10?570:575]"></u-badge>
				</image>
				<view class="noticecontent">
					<text class="noticetitle">系统消息</text>
					<text class="noticetext">系统活动，系统升级</text>
				</view>
			</view>
			<view class="noticeitem">
				<image src="/static/notice2.png">
					<u-badge :count="noticecount" type="error" :offset="[15,noticecount>=100?565:noticecount>=10?570:575]"></u-badge>
				</image>
				<view class="noticecontent">
					<text class="noticetitle">站内信</text>
					<text class="noticetext">关于订单投诉建议、仲裁反馈等</text>
				</view>
			</view>
			<view class="noticeitem">
				<image src="/static/notice3.png">
					<u-badge :count="noticecount" type="error" :offset="[15,noticecount>=100?565:noticecount>=10?570:575]"></u-badge>
				</image>
				<view class="noticecontent">
					<text class="noticetitle">互动消息</text>
					<text class="noticetext">和您有关的评论/互动</text>
				</view>
			</view>
			<view class="noticeitem">
				<image src="/static/notice4.png">
					<u-badge :count="noticecount" type="error" :offset="[15,noticecount>=100?565:noticecount>=10?570:575]"></u-badge>
				</image>
				<view class="noticecontent">
					<text class="noticetitle">会话列表</text>
					<text class="noticetext">和您有关的会话</text>
				</view>
			</view>
			<view class="noticeitem">
				<image src="/static/notice5.png">
					<u-badge :count="noticecount" type="error" :offset="[15,noticecount>=100?565:noticecount>=10?570:575]"></u-badge>
				</image>
				<view class="noticecontent">
					<text class="noticetitle">在线客服</text>
					<text class="noticetext">在的亲</text>
				</view>
			</view>
		</view>
		<!-- 初始弹出层 询问是否开启消息推送 -->
		<u-popup :mask="false" mode="top" v-model="isOpennoticeAsk" :mask-close-able="false">
			<view class="opennoticeask">
				<u-icon name="close" v-on:click="closeNoticeask()"></u-icon>
				<view class="asktext">
					<text>打开推送通知</text>
					<text>关于您的消息会第一时间通知</text>
				</view>
				<view class="openmovement">
					<text>开启</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpennoticeAsk:true,
				noticecount:100
			}
		},
		methods: {
			closeNoticeask(){
				this.isOpennoticeAsk=false
			}
		}
	}
</script>

<style lang="scss">
      page{
		  width: 100%;
		  height: 100%;
	  }
	  .container{
		  width: 100%;
		  height: 100%;
		  .opennoticeask{
			  width: 100%;
			  height: 100rpx;
			  background-color: #F4F8FB;
			  display: flex;
			  align-items: center;
			  justify-content: space-around;
		  }
		  .asktext{
			  font-size: 28rpx;
			  color: #888;
			  display: flex;
			  flex: 1;
			  flex-wrap: wrap;
			  text{
				  width: 100%;
			  }
			  margin-left: 20rpx;
		  }
		  .openmovement{
			  background-color: #0EAE64;
			  color: #fff;
			  width: 120rpx;
			  font-size: 30rpx;
			  height: 60rpx;
			  border-radius: 5rpx;
			  line-height: 60rpx;
			  text-align: center;
			  margin-right: 20rpx;
		  }
		  .noticelist{
			  width: 100%;
			  height: auto;
			  margin-top:20rpx;
			  .noticeitem{
				  width: 680rpx;
				  margin: auto;
				  height: auto;
				  border-bottom: 1rpx solid #F1F1F1;
				  padding-top: 20rpx;
				  padding-bottom: 20rpx;
				  display: flex;
				  align-items: center;
				  position: relative;
				  image{
					  border-radius: 100%;
					  width: 100rpx;
					  height: 100rpx;
					  position: relative;
				  }
			  }
			  .noticecontent{
				  margin-left: 20rpx;
				  text{display: block;width: 100%;}
			  }
			  .noticetitle{
				  font-size: 30rpx;
			  }
			  .noticetext{
				  color: #888;
				  font-size: 25rpx;
				  margin-top: 8rpx;
			  }
		  }
	  }
</style>
